import { useEffect} from 'react'
import {Outlet, useLocation, useNavigate} from 'react-router-dom'
import {useDispatch} from 'react-redux'
import {getBillList} from '@/store/modules/billSlice'
import './index.scss'
import { TabBar } from 'antd-mobile'
import {BillOutline,AddCircleOutline,CalculatorOutline} from 'antd-mobile-icons'


const tabs = [
    {
      key: '/',
      title: '月度收支',
      icon: <BillOutline />,
    },
    {
      key: '/add',
      title: '记账',
      icon: <AddCircleOutline />,
    },
    {
      key: '/year',
      title: '年度账单',
      icon: <CalculatorOutline />,
    }
  ]
const Home = () => {
    const dispatch = useDispatch()
    useEffect(()=> {
        dispatch(getBillList())
    },[dispatch])

const location = useLocation()
const {pathname} = location
const navigate = useNavigate()
const setRouteActive = (value)=> {
    navigate(value)
}

    return (
        <>
        <div className="layout">
            <div className="container">
                {/* 二级路由出口 */}
                <Outlet />
            </div>
            <div className="footer">
                <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        </div>
        </>
    )
}

export default Home